<template>
  <div class="printPage">
    <div class="content2" v-for="(page, pidx) in pages">
      <img style="height: 33mm; position: absolute; bottom: 3mm; right: 70mm" :src="imageSrc" />
      <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%">
        <table class="noborder">
          <colgroup>
            <col style="width: 7mm" />
            <col style="width: 14mm" />
            <col style="width: 23mm" />
            <col style="width: 35mm" />
            <col style="width: 7mm" />
            <col style="width: 13mm" />
            <col style="width: 16mm" />
            <col style="width: 15mm" />
            <col style="width: 18mm" />
            <col style="width: 18mm" />
          </colgroup>
          <thead>
            <tr>
              <th colspan="10" class="noborder" style="height: 12mm">
                <h1 style="position: relative">
                  {{ $store.state.settings.sysName.slice(0, 2) }}市衡德实业有限公司采购对账单
                  <!-- <span style="text-align: right; right: 0px; position: absolute; font-size: 11pt">
                      打印次数 ({{ context.clickRwmMstr.billDyflag || 1 }})
                    </span> -->
                </h1>
                <hr style="border: 0; border-top: 4px double #000" />
              </th>
            </tr>
            <tr>
              <th colspan="2">供应商</th>
              <th colspan="3" style="text-align: left">
                {{ getDictLabel(context.clickRwmMstr.billCsdm, allCsOptions, 'dictValue', 'csmCsmc') }}
                {{ context.clickRwmMstr.billCsdm == 'HD000' ? '(' + context.clickRwmMstr.billGsmc + ')' : '' }}
              </th>
              <th colspan="3">对账期</th>
              <th>{{ $moment(context.clickRwmMstr.billKsrq).format('YYYY-MM-DD') }}</th>
              <th>{{ $moment(context.clickRwmMstr.billJsrq).format('YYYY-MM-DD') }}</th>
            </tr>
            <tr>
              <th colspan="2">对账单号</th>
              <th colspan="3" style="text-align: left">{{ context.clickRwmMstr.billDjbh }}</th>
              <th colspan="3">发票号</th>
              <th colspan="2">{{ context.clickRwmMstr.billInvoice }}</th>
            </tr>
            <tr>
              <th>序号</th>
              <th>物料代码</th>
              <th>客户编号</th>
              <th>品名规格</th>
              <th>单位</th>
              <th>入库数量</th>
              <th>实际结算数</th>
              <th>含税单价</th>
              <th>金额</th>
              <th>备注</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, idx) in page">
              <td>{{ pidx * 7 + idx + 1 }}</td>
              <td>{{ item.rwdWldm }}</td>
              <td>
                {{ item.itmCustwldm }}
              </td>
              <td>
                {{ item.itmPmgg }}
              </td>
              <td><dict-tag :options="unitFlagOptions" :value="item.itmDw" /></td>
              <td>{{ item.rwdRksl }}</td>
              <td>{{ item.completeNumber }}</td>
              <td>{{ item.rwdMoney }}</td>
              <td>{{ $math.mul(item.completeNumber, item.rwdMoney).toNumber() }}</td>
              <td class="nowrap"></td>
            </tr>
            <tr style="text-align: center; font-weight: 700">
              <td>&emsp;</td>
              <td colspan="7">合计</td>
              <td colspan="2" style="font-weight: 700">{{ context.clickRwmMstr.billTotalJe }}</td>
            </tr>
          </tbody>
        </table>

        <!-- <div style="width: 5mm; flex: 0 0 5mm"></div> -->
        <div class="footer">
          <span>审核:{{ context.clickRwmMstr.billRzry }}</span>
          <span>验收:{{ context.clickRwmMstr.billShry }}</span>
          <span>开单人员:{{ context.clickRwmMstr.billJlry }}</span>
          <span>对账日期:{{ context.clickRwmMstr.billJlrq }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mixin from '@/mixins/common'
import { printOrder, splitArray } from '@/utils/ruoyi'
export default {
  name: 'Print1',
  mixins: [
    mixin.allCsOptions,
    mixin.unitFlagOptions,
    mixin.jyjgDict,
    mixin.psTypeOptions,
    mixin.csOptions,
    mixin.allStorageOptions,
    mixin.storageOptions,
  ],
  props: {
    context: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  computed: {
    pages() {
      if (this.context.pageData) {
        return splitArray(this.context.pageData, 40)
      } else {
        return []
      }
    },
  },
  data() {
    return {
      imageSrc:
        this.$store.state.settings.sysName.slice(0, 2) === '荆州' ? require('@/assets/images/dzqzjz.png') : require('@/assets/images/dzqzwh.png'),
    }
  },
}
</script>

<style lang="scss" scoped>
.printPage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 21cm;
  text-align: center;
  .content2 {
    position: relative;
    display: flex;
    //line-height: 28px;
    padding: 5mm 5mm 5mm 5mm;
    font-family: '等线';
    font-weight: 400;
    color: #000000;
    width: 21cm;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    break-after: always;
    break-before: always;
    break-inside: always;
    page-break-after: always;
    h1 {
      font-size: 12pt;
      text-align: center;
      font-family: '等线';
      font-weight: 400;
    }
    .footer {
      display: flex;
      justify-content: space-between;
      padding: 2mm 10mm 2mm 3mm;
      width: 20cm;
      span {
        flex: 1;
        white-space: nowrap;
      }
    }
    .nowrap {
      white-space: nowrap;
      overflow: hidden;
      // display: inline-block;
    }
    .noborder {
      border: none;
    }
    table {
      margin-right: 1mm;
      border: 1px solid black;
      border-collapse: collapse;
      text-align: center;
      line-height: 20px;
      font-size: 11pt;
      color: #000000;
      table-layout: fixed;
      width: 20cm;
      thead {
        display: table-header-group;
        break-after: avoid;
        break-before: avoid;
        break-inside: avoid;
        tr,
        th,
        div,
        span,
        hr,
        h1 {
          break-after: avoid;
          break-before: avoid;
          break-inside: avoid;
        }
      }
      tfoot {
        display: table-footer-group;
        break-after: avoid;
        break-before: avoid;
        break-inside: avoid;
      }
      tbody {
        display: table-row-group;
      }
      tr {
        height: 5mm;
      }
      td,
      th {
        border: 1px solid black;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}
</style>
